<template>
  <div class="person">
    <h2>{{ a }}</h2>
    <h2>{{ b }}</h2>
    <ul>
      <li v-for="person in personList" :key="person.id">
        {{ person.name }} -- {{ person.age }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
// defineProps可以不进行引入，属于宏函数
import { defineProps, withDefaults } from 'vue'
import { type Persons } from '@/types';

/**
 * 只接受list
 */
// const props = defineProps(['a', "b", "c", "personList"])
// console.log(props.a);


/**
 * 接受list + 限制类型
 */
// const props = defineProps<{ a: string, b: number, personList: Persons }>()

/**
 * 接受list + 限制类型 + 限制必要性 + 指定默认值
 */
const props = withDefaults(defineProps<{ a: string, b: number, personList?: Persons }>(), {
  personList: () => [{
    id: '1',
    name: '康师傅',
    age: 12,
  },]
})

</script>

<style scoped>
.person {
  background: darksalmon;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>